<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '退款详情',
			size: '800px'
		}"
		@close="reset"
	>
		<el-card shadow="never">
			<el-form label-width="120px">
				<el-form-item label="退款归属：">
					{{ info.biz_name }}-{{ info.bra_name }}-{{ info.store_name }}
				</el-form-item>

				<el-form-item label="提交人：">{{ info.add_user_name }}</el-form-item>
				<el-form-item label="提交时间：">{{ info.created_at }}</el-form-item>
				<!-- <el-form-item label="退款项目：">{{ items }}</el-form-item> -->
				<el-form-item label="退款项目：">
						<el-table border :data="items" v-if="items && items.length > 0">
							<el-table-column
								label="退款项目名称"
								prop="prod_name"
								min-width="160"
								:showOverflowTooltip="true"
							/>
							<el-table-column
								label="应付金额"
								prop="real_amount"
								width="100"
							></el-table-column>
							<el-table-column
								label="成本"
								prop="costmoney"
								width="100"
							></el-table-column>
							<el-table-column
								label="申请退款金额"
								prop="refund_money"
								width="110"
							></el-table-column>
							<el-table-column
								label="实际退款金额"
								prop="actual_money"
								width="110"
							></el-table-column>
						</el-table>
				</el-form-item>
				<el-form-item label="退款类型：">{{ info.refund_name }}</el-form-item>
				<el-form-item label="订单总额：">￥{{ info.pay_amount || 0 }}</el-form-item>
				<el-form-item label="退款成本：">￥{{ info.refund_cost || 0 }}</el-form-item>
				<el-form-item label="实付金额：">￥{{ info.real_amount || 0 }}</el-form-item>
				<el-form-item label="未付/欠款金额：">￥{{ info.rest_amount || 0 }}</el-form-item>
				<el-form-item label="退款金额：">￥{{ info.actual_money || 0 }}</el-form-item>
				<el-form-item label="退款原因：">{{ info.remark }}</el-form-item>
				<el-form-item label="退款凭证：">
					<div class="mt-1" v-if="info.images && info.images.length">
						<cl-avatar
							v-for="(item, index) in info.images"
							:key="index"
							:src="`${item}?x-oss-process=image/resize,limit_0,m_fill,w_50,h_50`"
							:previewSrcList="[item]"
							shape="square"
							class="mr-1"
						/>
					</div>
					<span v-else>-</span>
				</el-form-item>
				<el-form-item label="收款户名：">{{ info.bank_name }}</el-form-item>
				<el-form-item label="收款银行：">{{ info.bank_type_name }}</el-form-item>
				<el-form-item label="银行卡号：">{{ info.back_account }}</el-form-item>
				<el-form-item label="责任老师：">{{ getResponsible(info.responsible) || '-' }}</el-form-item>
				<el-form-item label="业绩备注：">{{ info.achieve_remark || '-' }}</el-form-item>
				<!-- <el-form-item label="付款订单号：">{{ info.pay_order_no || '-' }}</el-form-item>
				<el-form-item label="支付方式：">{{ info.pay_type_name || '-' }}</el-form-item> -->
				<el-form-item label="支付信息：">{{ info.pay_order_no || '-' }}</el-form-item>
				<!-- <el-form-item label="支付信息：">
					<el-table
						:data="info.orderNumberList.length ? form.orderNumberList : []"
						border
						stripe
						class="mb-2 table"
					>
						<el-table-column type="index" label="#" width="80" align="center" />
						<el-table-column prop="num" label="付款订单号" align="left">
							<template #default="{ row }">
								<span>{{ row.pay_order_no }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="num" label="支付方式" width="150" align="left">
							<template #default="{ row }">
								{{ row.pay_type_name }}
							</template>
						</el-table-column>
					</el-table>
				</el-form-item> -->
			</el-form>
		</el-card>
		<el-form label-position="top" class="mt-1">
			<el-form-item label="退款流程">
				<el-card shadow="never">
					<el-timeline v-if="info.work_flow_list">
						<el-timeline-item
							v-for="(item, index) in info.work_flow_list"
							:key="index"
							:timestamp="item.status_name"
							placement="top"
							:type="getFlowColor(item)"
						>
							<div>
								{{ item.user_name }} <span class="ml-1 time">{{ item.time }}</span>
							</div>
							<div v-if="item.remark" class="flex">
								<span style="color: #606266;" class="color-info">备注：</span>
								<div class="remark-content" v-html="item.remark"></div>
							</div>
							<div v-if="item.images && item.images.length" class="flex">
								<span style="color: #606266;" class="color-info">图片：</span>
								<div class="mt-1">
									<cl-avatar
										v-for="(img, imgidx) in item.images"
										:key="index + '-' + imgidx"
										:src="`${img}?x-oss-process=image/resize,limit_0,m_fill,w_50,h_50`"
										:previewSrcList="item.images"
										shape="square"
										class="mr-1"
									/>
								</div>
							</div>
						</el-timeline-item>
					</el-timeline>
				</el-card>
			</el-form-item>
		</el-form>
		<template #left-footer>
			<div class="flex w-100 pr-1">
				<cl-flex1 />
				<el-button size="small" @click="handleComment()">
					评论
				</el-button>
				<template v-if="info.is_audit == 1">
					<el-button
						size="small"
						v-if="info.is_edit == 1"
						@click="handleOpt({ value: 'edit' })"
					>
						编辑
					</el-button>

					<el-button
						v-for="item in operate_type"
						:key="item.name"
						:type="item.type"
						size="small"
						@click="handleOpt(item)"
					>
						{{ item.label }}
					</el-button>
				</template>
				<!-- <el-button
					size="small"
					v-auth="'store_oa_refund_cancel'"
					@click="handleOpt({ value: 'cancel' })"
				>
					撤销
				</el-button> -->
			</div>
		</template>
		<oa-comment-form ref="commentForm" />
	</cl-drawer>
</template>
<script>
import oaRefundMixin from "@/mixins/oa-refund";

export default {
	name: "oa-refund-detail",
	mixins: [oaRefundMixin],
	inject: ["$layout"],
	data() {
		return {
			callback: null,
			oa_id: null,
			info: {
				items: [],
				work_flow_list: [],
				orderNumberList: []
			},
			jump_node_list: []
		};
	},
	computed: {
		operate_type() {
			const { operate_type } = this.info;
			const operateList = this.$const.OA_REFUND_OPT_TYPE;
			return operateList.filter(v => operate_type?.includes?.(v.value));
		},
		// items() {
		// 	const { items_list, items = [] } = this.info;
		// 	return items_list
		// 		?.filter?.(v => items?.includes(v.list_id))
		// 		.map(v => v.prod_name)
		// 		.join(";");
		// }
		items() {
			const { items_list, items = [] } = this.info;
			const itemsArr = items?.map(e => e.list_id)
			return items_list
				?.filter?.(v => itemsArr?.includes(v.list_id))
				.map(v => {
					const indexKey = items.findIndex(e => e.list_id == v.list_id)
					return {
						...v,
						refund_money: items[indexKey].refund_money,
						actual_money: items[indexKey].actual_money
					}
				})
		}
	},
	methods: {
		async open(data = {}, callback) {
			this.callback = callback;
			this.$refs.drawer.create();
			this.oa_id = data.oa_id;
			this.jump_node_list = data.jump_node_list ?? [];
			await this.getInfo();
		},
		reset() {
			this.callback && this.callback(this.info);
			this.info = {};
		},
		close() {
			this.$refs.drawer.close();
			this.reset();
		},
		async getInfo() {
			this.info = await this.$service.oa.info({ oa_id: this.oa_id });
		},
		async refresh() {
			await this.getInfo();
			this.callback && this.callback(this.info);
		},
		getFlowColor(item) {
			if (item.cur_node == 1) return "warning";
			return item.time ? "success" : "";
		},
		getResponsible(item = []) {
			const text = (item?.map(e => e.responsible_name) ?? []).join(',')
			return text
		},
		handleComment() {
			this.$refs.commentForm.open(this.info, () => {
				setTimeout(() => {
					this.getInfo();
				}, 300);
			});
		},
		handleOpt(opt) {
			if (opt.value == "edit") {
				this.$layout.oaRefundInfoEdit(this.info, () => {
					this.refresh();
				});
				return;
			}
			if (opt.value == "cancel") {
				this.confirm("是否撤销退款?")
					.then(async () => {
						await this.$service.oa.cancel({ oa_id: this.oa_id });
						this.$store.commit("REMOVE_OA_MESSAGE", this.oa_id);
						this.$message.success("撤销成功");
						this.$emit("cancel", this.oa_id);
						this.close();
					})
					.catch(() => {});
				return;
			}
			this.$layout.oaRefundAudit(
				opt.label,
				{
					oa_id: this.oa_id,
					operate_type: opt.value,
					jump_node_list: this.jump_node_list
				},
				async () => {
					this.refresh();
				}
			);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
	margin-bottom: 0;
}
.time {
	color: #909399;
}
.remark-content {
	flex: 1;
	white-space: pre-wrap;
	word-break: break-all;
	overflow: hidden;
	::v-deep {
		img {
			max-width: 100%;
		}
	}
}
</style>
